<template>
  <betArea :lotteryCode="lotteryCode" ref="betRef" v-model:isSame="isSame" />

  <!-- 下注 -->
  <investPopup @updateInvestList="clearInvestList">
    <template #betBtn>
      <div class="bet-btn" @click="betNow">
        <div class="main-text">{{ isFill ? '重复投注' : '立即投注' }}</div>
        <div v-if="investStore.investList.length > 0">{{ investStore.howMuch }}</div>
      </div>
    </template>
  </investPopup>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, defineAsyncComponent } from 'vue'
import { useInvestStore } from '@/stores/invest'
import betArea from './betArea.vue'
// import investPopup from '@/components/invest-popup.vue'
import { useAppStore } from '@/stores/app'

const investPopup = defineAsyncComponent(() => import('@/components/invest-popup.vue'))
// const betArea = defineAsyncComponent(() => import('./betArea.vue'))

const investStore = useInvestStore()

const appStore = useAppStore()

type Props = {
  lotteryCode: string
}

defineProps<Props>()

const isSame = ref(false)

const betRef = ref()

const isFill = computed(() => {
  return isSame.value && !investStore.investList.length
})

const clearInvestList = () => {
  betRef.value?.clearInvestList()
}

const betNow = () => {
  if (isFill.value) betRef.value?.fillLastNumber()
  else betRef.value?.betNow()
}

const open = () => {
  nextTick(() => {
    betRef.value?.open?.()
  })
}

watch(
  () => appStore.isProBet,
  (n) => {
    if (n) open()

    investStore.setInvestNum([])
  },
  {
    immediate: true,
  },
)

defineExpose({
  open,
})
</script>

<style lang="less" scoped>
.bet-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 172px;
  height: 47px;
  background: url('@/assets/img/bet/bet_bg.png') center center no-repeat;
  background-size: contain;
  box-sizing: border-box;
  padding-bottom: 2px;
  line-height: 1;
}

.main-text {
  font-size: 16px;
  margin-bottom: 2px;
}
</style>
